<template>
  <!-- 图表容器：必须与 setup 中 ref 命名一致（bmiChart、exerciseChart） -->
  <Row :gutter="16">
    <!-- BMI 趋势图容器 -->
    <Col span="12">
      <div ref="bmiChart" class="chart-container"></div>
    </Col>
    <!-- 锻炼情况图容器 -->
    <Col span="12">
      <div ref="exerciseChart" class="chart-container"></div>
    </Col>
  </Row>
</template>

<script>
// 你的原有 script 代码不变（import + setup 逻辑）
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

export default {
  name: 'Charts',
  setup () {
    const bmiChart = ref(null)
    const exerciseChart = ref(null)

    onMounted(() => {
      initBMIChart()
      initExerciseChart()
    })

    const initBMIChart = () => {
      // 增加 DOM 存在性判断（避免报错）
      if (!bmiChart.value) return
      const chart = echarts.init(bmiChart.value)
      chart.setOption({
        title: { text: 'BMI指数趋势', left: 'center', textStyle: { fontSize: 14 } },
        xAxis: { type: 'category', data: ['11/1', '11/2', '11/3', '11/4', '11/5', '11/6', '11/7'] },
        yAxis: { type: 'value', min: 24.8, max: 27.0 },
        series: [{
          data: [26.4, 26.2, 26.0, 25.8, 25.6, 25.5, 25.3],
          type: 'line',
          symbol: 'circle',
          itemStyle: { color: '#2d8cf0' }
        }],
        grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true }
      })
      // 监听窗口 resize，避免图表变形
      window.addEventListener('resize', () => chart.resize())
    }

    const initExerciseChart = () => {
      // 增加 DOM 存在性判断（避免报错）
      if (!exerciseChart.value) return
      const chart = echarts.init(exerciseChart.value)
      chart.setOption({
        title: { text: '本周锻炼情况', left: 'center', textStyle: { fontSize: 14 } },
        xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        yAxis: { type: 'value', name: '分钟' },
        series: [{
          data: [45, 30, 60, 0, 45, 75, 40],
          type: 'bar',
          itemStyle: { color: '#19be6b' }
        }],
        grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true }
      })
      // 监听窗口 resize，避免图表变形
      window.addEventListener('resize', () => chart.resize())
    }

    return { bmiChart, exerciseChart }
  }
}
</script>

<style lang="less" scoped>
.chart-container {
  width: 100%;
  height: 280px;
  /* 增加背景色，方便确认容器是否存在 */
  background: #f8f9fa;
  border-radius: 4px;
}
</style>